<template>
  <div class="user-group-list-container">
    <el-aside width="230px">
      <div class="aside-header">
        <div class="aside-header-title">
          <div>
            <h3>创建分组</h3>
            <span class="group-num">共{{ groupData.groupList.length }}组</span>
          </div>
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="openGroupDialog('null','创建分组')"></el-button>
        </div>
      </div>
      <el-menu :default-active="$route.params.id" @select="selectGroup">
        <el-menu-item index="0">
          <div class="group-title">
            <span class="iconfont icon-tuozhuai"></span>
            默认分组
          </div>
<!--          <div class="group-quantity">-->
<!--            {{'哈哈'}}-->
<!--          </div>-->
        </el-menu-item>
        <VueDraggableNext v-model="groupData.groupList" @change="draggable" animation="300">
          <transition-group>
            <el-menu-item v-for="(item,index) in groupData.groupList" :key="item.id" :index="item.id">
              <div class="group-title">
                <span class="iconfont icon-tuozhuai"></span>
                {{ item.name }}
              </div>
              <div class="group-btn">
                <img class="more-icon-img" :src="imgRootSrc+'more_icon.png'" alt="more_icon">
                <el-dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="openGroupDialog(item,'编辑分组')">编辑</el-dropdown-item>
                    <el-dropdown-item @click="groupData.showDelGroupDialog = true;groupData.delId = item.id">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
<!--              <div class="group-quantity">-->
<!--&lt;!&ndash;                item.shortLinkQuantity&ndash;&gt;-->
<!--                {{'哈哈'}}-->
<!--              </div>-->
            </el-menu-item>
          </transition-group>
        </VueDraggableNext>
      </el-menu>
    </el-aside>
    <el-main>
      <router-view @init="init" :groupTitle="groupData.groupTitle"></router-view>
    </el-main>
  </div>
  <!-- 创建或修改分组对话框start -->
  <el-dialog :title="groupData.groupDialogTitle" v-model="groupData.showGroupDialog" @close="closeDialog('groupRef')" width="500px">
    <el-form :model="groupData" :rules="groupData.groupRules" ref="groupRef" label-width="80px" label-position="top">
      <el-form-item label="分组名称" prop="name">
        <el-input v-model="groupData.name" placeholder="请输入分组名"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button  size="mini" @click="groupData.showGroupDialog = false">取消</el-button>
      <el-button type="primary" size="mini" @click="submitGroupName">确定</el-button>
    </template>
  </el-dialog>
  <!-- 创建或修改分组对话框end -->

  <el-dialog title="确认删除" v-model="groupData.showDelGroupDialog" width="500px">
    <span>删除分组后，分组内的短链接将会被删除，删除后依然可以跳转和统计数据。是否删除？</span>
    <template #footer>
      <el-button type="default" size="mini" @click="groupData.showDelGroupDialog = false">取消</el-button>
      <el-button type="primary" size="mini" @click="delClick">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import {useRouter, useRoute, onBeforeRouteUpdate} from 'vue-router';
import { VueDraggableNext } from 'vue-draggable-next'
import {reactive, ref, getCurrentInstance, onMounted, nextTick} from 'vue'
import {addOldCode, delOldCode, editOldCode, getOldCodeList} from "../../../axios/userRequest";
const {proxy} = getCurrentInstance()
const imgRootSrc = '/img/my-short-chain-images/short-chain-management-images/'
let router = useRouter()
let route = useRoute()
// 分组数据
const groupData = reactive({
  groupList:[],
  showGroupDialog:false,// 分组对话框显示
  showDelGroupDialog:false,// 删除分组对话框显示
  groupDialogTitle:'',// 分组对话框标题
  name:'',// 分组名
  groupRules:{// 分组表单校验规则
    name:[
      {required:true,message:'请输入分组名'}
    ]
  },
  groupTitle: '',
  editId:'',
  delId:''
})
onMounted(()=>{
  init()
})

const init = async()=>{
  let {code,data,msg} = await getOldCodeList({type:1})
  if(code !=0) return proxy.$message.error(msg)
  groupData.groupList = data.reverse()
  let haveId = [0]
  groupData.groupList.forEach(item=>{
    haveId.push(item.id)
    route.params.id != 0 ? route.params.id == item.id ? groupData.groupTitle = item.name : '' : groupData.groupTitle = '默认分组'
  })

  if(!haveId.includes(Number(route.params.id))){
    await router.push('/user-center/old-code/0')
  }

}
init()
onBeforeRouteUpdate(to=>{
  to.params.id != 0 ? groupData.groupList.find(item=>to.params.id == item.id ? groupData.groupTitle = item.name : '') : groupData.groupTitle = '默认分组'
})

// 拖拽
const draggable = (event)=>{
  console.log(event)
}

// 选择分组
const selectGroup = (id)=>{
  router.push(`/user-center/old-code/${id}`)
}

// 打开添加或修改分组对话框
const openGroupDialog = (item,title) =>{
  groupData.editId = item.id
  groupData.name = item.name
  groupData.showGroupDialog = true
  groupData.groupDialogTitle = title
}

// 创建或修改分组
const submitGroupName = ()=>{
  proxy.$refs.groupRef.validate( async (bool)=>{
    if(!bool)return false
    if(groupData.groupDialogTitle == '创建分组'){
      let {code,msg} = await addOldCode({type:'1',name:groupData.name})
      if(code !=0)return proxy.$message.error(msg)
      proxy.$message.success(msg)
      init()
    }else {
      let {code,msg} = await editOldCode(groupData.editId,{name:groupData.name})
      if(code !=0)return proxy.$message.error(msg)
      proxy.$message.success(msg)
      init()
    }

    groupData.showGroupDialog = false
  })
}

//删除弹框
const delClick = async()=>{
  try {
    let {code,msg} = await delOldCode({id:[groupData.delId]})
    if(code !=0)return proxy.$message.error(msg)
    proxy.$message.success(msg)
    groupData.showDelGroupDialog = false
    init()
  }catch (e) {

  }
}
// 关闭对话框
const closeDialog = refName =>{
  proxy.$refs[refName].resetFields()
}
</script>

<style lang="less" scoped>
</style>
